<template>
    <section class="coupon-list-main base-main">
      <van-tabs v-model="active" class="line-bottom bgcFFF" animated>
        <van-tab title="全部">
          <div class="coupon-box" v-if="couponData.length > 0">
            <!--<Coupon :couponData="couponData"></Coupon>-->
            <Coupon :couponData="unsabel"></Coupon>
          </div>
          <div v-if="couponData.length <= 0" class="coupon-none-box pr text-c">
            <img src="../../assets/img/icon_none_coupon.png" alt="无数据">
            <p>暂无优惠券</p>
          </div>
        </van-tab>
        <van-tab title="可用">
          <div class="coupon-box" v-if="useData.length > 0">
            <Coupon :couponData="useData"></Coupon>
          </div>
          <div v-if="useData.length <= 0" class="coupon-none-box pr text-c">
            <img src="../../assets/img/icon_none_coupon.png" alt="无数据">
            <p>暂无优惠券</p>
          </div>
        </van-tab>
        <van-tab title="已过期">
          <div class="coupon-box" v-if="unsabel.length > 0">
            <Coupon :couponData="unsabel"></Coupon>
          </div>
          <div v-if="unsabel.length <= 0" class="coupon-none-box pr text-c">
            <img src="../../assets/img/icon_none_coupon.png" alt="无数据">
            <p>暂无优惠券</p>
          </div>
        </van-tab>
        <van-tab title="已使用">
          <div class="coupon-box" v-if="unsabel.length > 0">
            <Coupon :couponData="unsabel"></Coupon>
          </div>
          <div v-if="unsabel.length <= 0" class="coupon-none-box pr text-c">
            <img src="../../assets/img/icon_none_coupon.png" alt="无数据">
            <p>暂无优惠券</p>
          </div>
        </van-tab>
      </van-tabs>
      <Loading :show="isLoading"></Loading>
    </section>
</template>

<script type="text/ecmascript-6">
  import Coupon from '../../components/Coupon.vue'
  import Loading from '../../components/Loading.vue'

  export default {
    components:{
      Coupon,Loading
    },
    data() {
      return {
        active:0,
        isLoading:false,
        couponData:[],//优惠券数据
        unsabel:[
          {
            sum:'30',
            condition:'满100元可用',
            name:'优惠券名称优惠券名称优惠券优惠券名称优惠券名称优惠券',
            validity:'2018.04.24 ~ 2018.08.24',
            id:'1',
            use:0,
            past_due:1,//1已过期
            used:0,//1为已使用
          },
          {
            sum:'10',
            condition:'满100元可用',
            name:'优惠券名称优惠券名称优惠券优惠券名称优惠券名称优惠券',
            validity:'2018.04.24 ~ 2018.08.24',
            id:'2',
            use:0,
            past_due:0,//1已过期
            used:1,//1为已使用
          },
          {
            sum:'40',
            condition:'满100元可用',
            name:'优惠券名称优惠券名称优惠券优惠券名称优惠券名称优惠券',
            validity:'2018.04.24 ~ 2018.08.24',
            id:'3',
            use:0,
            past_due:1,//1已过期
            used:0,//1为已使用
          },
          {
            sum:'10',
            condition:'满100元可用',
            name:'优惠券名称优惠券名称优惠券优惠券名称优惠券名称优惠券',
            validity:'2018.04.24 ~ 2018.08.24',
            id:'2',
            use:1,
            checked:0,
          },
          {
            sum:'10',
            condition:'满100元可用',
            name:'优惠券名称优惠券名称优惠券优惠券名称优惠券名称优惠券',
            validity:'2018.04.24 ~ 2018.08.24',
            id:'2',
            use:1,
            checked:0,
          },
          {
            sum:'10',
            condition:'满100元可用',
            name:'优惠券名称优惠券名称优惠券优惠券名称优惠券名称优惠券',
            validity:'2018.04.24 ~ 2018.08.24',
            id:'2',
            use:1,
            checked:0,
          },
          {
            sum:'10',
            condition:'满100元可用',
            name:'优惠券名称优惠券名称优惠券优惠券名称优惠券名称优惠券',
            validity:'2018.04.24 ~ 2018.08.24',
            id:'2',
            use:1,
            checked:0,
          },
        ],
        useData:[
          {
            sum:'30',
            condition:'满100元可用',
            name:'优惠券名称优惠券名称优惠券优惠券名称优惠券名称优惠券',
            validity:'2018.04.24 ~ 2018.08.24',
            id:'1',
            use:1,
          },
          {
            sum:'10',
            condition:'满100元可用',
            name:'优惠券名称优惠券名称优惠券优惠券名称优惠券名称优惠券',
            validity:'2018.04.24 ~ 2018.08.24',
            id:'2',
            use:1,
          },
          {
            sum:'40',
            condition:'满100元可用',
            name:'优惠券名称优惠券名称优惠券优惠券名称优惠券名称优惠券',
            validity:'2018.04.24 ~ 2018.08.24',
            id:'3',
            use:1,
          },
          {
            sum:'40',
            condition:'满100元可用',
            name:'优惠券名称优惠券名称优惠券优惠券名称优惠券名称优惠券',
            validity:'2018.04.24 ~ 2018.08.24',
            id:'3',
            use:1,
          },
          {
            sum:'40',
            condition:'满100元可用',
            name:'优惠券名称优惠券名称优惠券优惠券名称优惠券名称优惠券',
            validity:'2018.04.24 ~ 2018.08.24',
            id:'3',
            use:1,
          }

        ],
      }
    },
    created(){

    },
    methods: {

    },
  }
</script>

<style lang="scss">
  @import '../../assets/css/couponList.scss';
</style>
